<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sub-Selection</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>

<section id="section1">
    <div>
        <p>blue box</p>
    </div>
</section>
<section id="section2">
    <div>
        <p>red box</p>
    </div>
</section>

<script type="text/javascript">
    d3.select("#section1 > div") // <-- A
            .attr("class", "blue box");

    d3.select("#section2") // <-- B
            .style("font-size", "2em") // <-- B-1
            .select("div") // <-- C
            .attr("class", "red box");
</script>

</body>
</html>